<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
		<canvas id="canvas" width="500" height="400" style="border:1px solid silver;"></canvas>
		<button id="button">清除画面</button>
		<script>
			
			window.onload = function () {
				var canvas = document.getElementById("canvas");
				var cxt = canvas.getContext("2d");
				airboard();
				
				function airboard(){
					for (var i = 0;i<5;i++){
						for (var j=0;j<6;j++){
							cxt.fillStyle="rgb("+(255-130*i)+","+(255-50*j)+",0)";
							cxt.fillRect(26 * i,26 * j,25,25);
						}
					}
				}
				
				
				document.onclick = function(e){
					for(var i=0;i<5;i++){
						for(var j=0;j<6;j++){
							if (e.offsetX>=25*i && e.offsetX <=25*i+25 && e.offsetY>=25*j && e.offsetY<=25*j+25){
								cxt.strokeStyle = "rgb("+(255-130*i)+","+(255-50*j)+",0)";
								console.log(i,j);
								console.log("rgb("+(255-130*i)+","+(255-50*j)+",0)");
							}
							
						}
					}
				}
				
				var canvasx=canvas.getBoundingClientRect().left;
				var canvasy=canvas.getBoundingClientRect().top;
				
				canvas.addEventListener("mousedown",downfun);
				canvas.addEventListener("mousemove",movefun);
				canvas.addEventListener("mouseup",upfun);
				
				var startx;
				var starty;
				var endx;
				var endy;
				var offen=false;
				cxt.lineWidth=3;
				function downfun(e){
					offen=true;
					startx=e.clientX-canvasx;
					starty=e.clientY-canvasy;
					
				}
				
				function movefun(e){
					if(offen=true){
						cxt.beginPath();
						endx=e.clientX-canvasx;
						endy=e.clientY-canvasy;
						cxt.moveTo(startx,starty);
						cxt.lineTo(endx,endy);
						cxt.stroke();
						
						startx=endx;
						starty=endy;						
					}
					
				}
				function upfun(){
					offen=false;
					cxt.closePath();
				}
				document.getElementById("button").onclick=function(){
					cxt.clearRect(0,0,canvas.width,canvas.height);
					airboard();
				}
			}
		</script>
		
	</body>
</html>
